<template>
  <h2>自定义hook函数操作</h2>
  <h3>x:{{x}},y:{{y}}</h3>
  <!-- <h4 v-if="loadding">正在加载中...</h4>
  <h4 v-else-if="errorMsg">错误信息:{{errorMsg}}</h4>
  <ul v-else>
    <li>id:{{data.id}}</li>
    <li>address:{{data.address}}</li>
    <li>distance:{{data.distance}}</li>
  </ul> -->
  <ul v-for="item in data" :key="item.id">
    <li>id: {{item.id}}</li>
    <li>title: {{item.title}}</li>
    <li>price: {{item.price}}</li>
  </ul>
</template>
<script lang="ts">
import { defineComponent, watch } from 'vue'
import userMousePosition from './hooks/useMousePosition'
import userRequest from './hooks/useRequest'

interface IAddressData{
  id: number,
  address: string,
  distance: string
}
interface IProductsData{
  id: string,
  title: string,
  price: number
}
export default defineComponent({
  name: 'App',
  components: {

  },
  setup () {
    const { x, y } = userMousePosition()
    // const { loading, data, errorMsg } = userRequest<IAddressData>('/data/address.json')
    const { loading, data, errorMsg } = userRequest<IProductsData[]>('/data/products.json')

    watch(data, () => {
      console.log(data.value.length)
    })
    return {
      x,
      y,
      loading,
      data,
      errorMsg
    }
  }
})
</script>
